<template>
  <div id="state_scale_charts" style="width: 100%;height: 100%;position: relative;">
		<div class="nodata" v-if="!this.data || !this.data.length">暂无数据</div>
	</div>
</template>
<script>
export default {
  props: {
    data: {
        type: [Object, String],
        default: () => {}
    }
  },
  mounted() {
    this._initCharts()
	},
	watch: {
    data (newv) {
      this._initCharts()
    }
  },
  methods: {
    _initCharts () {
			if(!this.data) {
					return
			}
			const { normal, repair } = this.data
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("state_scale_charts"))
      
      const colorList = ['#5E52CD','#52D1BE', '#C17C52']
      const option = {
          title: {
              
              x: 'center',
              y: 'center',
              textStyle: {
                  fontSize: 20
              }
          },
          legend: {
            //   show:false,
              orient: 'horizontal',
              icon: 'react',
            //   bottom : this.$options.filters.fontSize(0.3),
              width: '35%',
              left: '70%',
              top: '20%',
              itemGap : this.$options.filters.fontSize(0.1),
              itemHeight: this.$options.filters.fontSize(0.06),
              itemWidth: this.$options.filters.fontSize(0.14),
              textStyle: {
                  fontSize: this.$options.filters.fontSize(0.16),
                  color: "#fff"
              }
              
          },
          tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ({d}%)'
          },
          series: [{
              type: 'pie',
              center: ['35%', '50%'],
              radius: ['35%', '75%'],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                  normal: {
                      color: function(params) {
                          return colorList[params.dataIndex]
                      }
                  }
              },
              label: {
                  show: false,
                  position: 'outside',
                //   formatter: '{a|{b}：\n{d}%}',
                  textStyle: {
                    fontSize: this.$options.filters.fontSize(0.16)
                  },
                  rich: {
                      hr: {
                          backgroundColor: 't',
                          borderRadius: 0,
                          width: 0,
                          height: 0,
                      },
                  }
              },
              labelLine: {
                  normal: {
                      length: this.$options.filters.fontSize(0.10),
                      length2: this.$options.filters.fontSize(0.10),
                      lineStyle: {
                          width: 0
                      }
                  }
              },
              data: [{
                  'name': '正常',
                  nameTextStyle: {
                      fontSize: this.$options.filters.fontSize(0.12)
                  },
                  textStyle: {
                      fontSize: this.$options.filters.fontSize(0.12)
                  },
                  'value': normal
              }, {
                  'name': '故障',
                  nameTextStyle: {
                      fontSize: this.$options.filters.fontSize(0.12)
                  },
                  textStyle: {
                      fontSize: this.$options.filters.fontSize(0.12)
                  },
                  'value': repair
              }],
          }]
      };



      // 绘制图表
      myChart.setOption(option)
      
      
    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
</style>